<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>banner图效果</title>
		<style type="text/css">
			*{margin: 0px; padding: 0px;}
			#ul1{list-style: none; position: absolute; left: 0px;}
			#ul1 li{width: 200px; height: 200px; margin: 10px; float: left;}
			#div1{width: 880px; height: 220px; border: 1px solid black; margin: 50px auto; position: relative; overflow: hidden;}
			#ul1 li img{width: 100%; height: 100%;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oUl1 = document.getElementById("ul1");
				var oDiv1 = document.getElementById("div1");
				
				oUl1.innerHTML += oUl1.innerHTML;
				oUl1.style.width = 220 * 8 + "px";
				
				setInterval(function(){
					stratMove(oUl1, {left: oUl1.offsetLeft-220}, function(){
						if(oUl1.offsetLeft <= -oUl1.offsetWidth/2){
							oUl1.style.left = "0px";
						}
					})
				}, 2000);
			}
			
			
			function getStyle(node, cssStyle){
				return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle]; 
			}                                                       
			
			/*
				回调函数：我们把函数当做参数传入，并且在适合的时机调用该函数的方式，叫做回调函数，在别的编程语言叫做指针函数
			*/
			
			function stratMove(node, cssObj, complete=null){
				clearInterval(node.timer);
				
				node.timer = setInterval(function(){
					var isEnd = true;    //假设所有运动都达到目标值
					for(let attr in cssObj){
						var iCur = null;
						var myTarget = cssObj[attr];
						
						if(attr == "opacity"){
							iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
						}
						else{
							iCur = parseInt(getStyle(node, attr));
						}
						
						var speed = (myTarget - iCur) / 8;
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						
						if(attr == "opacity"){
							iCur += speed;
							node.style.opacity = iCur / 100;
							node.style.filter = `alpha(opacity=${iCur})`;
						}
						else{
							node.style[attr] = iCur + speed + "px";
						}
						
						if(iCur != myTarget){
							isEnd = false;
						}
					}
					
					if(isEnd){
						clearInterval(node.timer);
						
						if(complete){
							complete.call(node);
						}
					}
				}, 30);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<ul id="ul1">
				<li><img src="img/cat1.jpeg" /></li>
				<li><img src="img/cat2.jpeg" /></li>
				<li><img src="img/cat3.jpeg" /></li>
				<li><img src="img/cat4.jpeg" /></li>
			</ul>
		</div>
	</body>
</html>
